<template>
    <div class="toggleList">
        <!-- 充值返利 -->
        <div v-if="type==1">
            <div  class="item-list" v-for="(item, index) in dataArr" :key="index" v-show="index<=num">
                {{item.content}} 
            </div>
            <div @click="showArr" class="showMore" v-if="hasMoreArr">
                {{txt}}   
                <i class="icon iconfont" v-show="isShow">&#xe72e;</i>
                <i class="icon iconfont" v-show="!isShow">&#xe74d;</i>
            </div>
        </div>
        <!-- 福利 -->
         <div v-if="type==2">
            <div v-for="(item, index) in dataArr" :key="index" v-show="index<=num">
                <div class="item-list" v-html="item.content"></div>
            </div>
            <div @click="showArr" class="showMore" v-if="hasMoreArr">
                {{txt}}
                <i class="icon iconfont" v-show="isShow">&#xe72e;</i>
                <i class="icon iconfont" v-show="!isShow">&#xe74d;</i>
            </div>
        </div>
        <!-- 游戏开服 -->
        <div v-if="type==3" class="type_3">
            <div class="item-list" v-for="(item, index) in dataArr" :key="index"  :class="{'active':isToday(item.start_time)}"> 
                <div class="time">
                    <i class="icon"></i>
                    {{item.start_time | filtertimestamp}}
                    <span v-if="isToday(item.start_time)">今天</span>
                </div>
                <div class="area">{{item.server}}</div>
            </div>
        </div>
        <!-- 游戏礼包 -->
        <div v-if="type==4" class="type_4">
            <div class="item-list" v-for="(item,index) in dataArr" :key="index">
                <div class="desc">
                    <div class="title">{{item.giftname}}</div>
                    <p>剩余：{{item.remainder}}  <span @click="giftInfo(item)"><span>使用说明</span> <i class="icon iconfont">&#xe8e8;</i></span></p>
                    <p v-html="item.content" class="giftInfo"></p>
                </div>
                <div class="btn" v-if="item.is_receive==0" @click="getGift(item)">
                    领取
                </div>
                <div class="btn" v-else  :data-clipboard-text="item.key||item.giftkey" @click='copy' id="copy">
                    复制
                </div>
            </div>
        </div>
        <!-- 游戏活动 -->
        <div v-if="type==5" class="type_5" v-show="dataArr">
            <div class="item-list" v-for="(item,index) in dataArr" :key="index" v-show="index<=num" @click="toactivity(item.id)">
                <div class="title">
                    <p class="text">
                        {{item.title}}
                    </p>
                </div>
                <i class="icon iconfont">&#xe601;</i>
            </div>
            <div @click="showArr" class="showMore" v-if="hasMoreArr">
                {{txt}}
                <i class="icon iconfont" v-show="isShow">&#xe72e;</i>
                <i class="icon iconfont" v-show="!isShow">&#xe74d;</i>
            </div>
        </div>
        <!-- 游戏简介-->
        <div v-if="type==6">
            <div :style="{height:isShow? showHeight+'rem':'auto'}" style="overflow:hidden;" :class="small==true?'autoHeight':''">
                <div class="item-list" v-html="dataStr"  ref="content"></div>
            </div>
            <div @click="showMore" class="showMore" v-if="hasMoreStr">
                {{txt}}
                <i class="icon iconfont" v-show="isShow">&#xe72e;</i>
                <i class="icon iconfont" v-show="!isShow">&#xe74d;</i>
            </div>
        </div>
    </div>
</template>

<script>
    import {receiveGift} from 'api/game_box'
    import Clipboard from 'clipboard'
    import { Toast } from 'vant'
    import {formatDate} from 'js/date'
    export default {
        props:{
            dataArr:{
                type:Array,
                default: function () {
                    return []
                }
            },
            dataStr:{
                type:String,
                default:""
            },
            type:{
                type:Number,
                default:1
            },
            toggletxt:{
                type:String,
                default:"展开"
            },
            gameId:{
                type:String,
                default:"41"
            }
        },
        data(){
            return{
                isShow: true,
                num:1,
                minNum:2,
                txt:'展开',
                hasMoreStr:false,
                showHeight:1.2,
                small:false,
            }
        },
        computed:{   
            hasMoreArr(){
                let arrLength=this.dataArr.length;
                if(arrLength<=this.minNum){
                    return false;
                }else{
                    return true;
                }
            },
            isToday(time){
                return function(time){
                    let start=new Date(new Date().toLocaleDateString()).getTime()/1000;
                    let end=(new Date(new Date().toLocaleDateString()).getTime()+24*60*60*1000-1)/1000;
                    if(start<=time&&time<end){
                        return true;
                    }else{
                        return false;
                        
                    }
                }
            }
        },
         filters:{
            filtertimestamp(time){
                let date = new Date(time*1000);
                return formatDate(date, 'MM-dd hh:mm');
            }
        },
        methods:{
            showMore(){
                this.isShow = !this.isShow;
                this.txt = this.isShow?  this.toggletxt:'收起';
            },
            showArr(){
                this.isShow = !this.isShow;
                this.num = this.isShow? 1: this.dataArr.length;
                this.txt = this.isShow?  this.toggletxt:'收起';
            },
            giftInfo(msg){
               this.$emit('onview',msg)
            },
            _calculateHeight () { 
                if(this.type==6){
                    this.$nextTick().then(() => { 
                    let contentHeight = this.$refs.content.clientHeight;
                    let minHeight=this.showHeight*parseFloat(document.documentElement.style.fontSize)
                    if (contentHeight > minHeight) {
                        this.hasMoreStr = true; 
                        this.small=false;
                    }else {
                        this.hasMoreStr = false;
                        this.small=true;
                    }
                 })
                }
            }, 
            getGift(item){   //领取礼包
                let id=item.id;
                receiveGift(id).then(res=>{
                    if(res.data.error==0){
                       Toast('领取成功，请复制礼包码'); 
                       res=res.data.content;
                       item.giftkey=res.key;
                       item.remainder--;
                       item.is_receive=1;
                    }      
                })
            },
            toactivity(id){
                this.$router.push({
                    path: `/gameDetail/${this.gameId}/activity/${id}`
                });
            },
            copy(){
                let clipboard = new Clipboard('#copy');
                clipboard.on('success', e => {
                    Toast.success('复制成功');
                    // 释放内存
                    clipboard.destroy()
                });
                clipboard.on('error', e => {
                    // 不支持复制
                    Toast.fail('该浏览器不支持自动复制');
                    // 释放内存
                    clipboard.destroy()
                });
            }

        },
        mounted(){
            this._calculateHeight();
            setTimeout(()=>{
                 this.$nextTick(()=>{
                    this.txt=this.toggletxt;
                })
            },100)
        },

        watch:{
            dataStr(){
                this._calculateHeight();
            }
        }
    }
</script>

<style scoped lang="scss">
@import '~styles/variable.scss';
@import '~styles/mixins';
.toggleList{
    .item-list{
        line-height:0.4rem;
        overflow:hidden;
        transition:all 1s ease;
    }
    .showMore{
        margin-top:0.2rem;
        line-height:0.4rem;
        text-align: center;
        color:$color-focus;
        i{
            vertical-align: middle;
            font-size:$font-size-s;
        } 
    }
    .type_3{
        .item-list{
            display:flex;
            justify-content: space-between;
            .time{
                margin-bottom:0.3rem;
                i{
                    vertical-align: top;
                    display:inline-block;
                    width:0.26rem;
                    height:0.26rem;
                    margin: 0.05rem 0.2rem 0 0.02rem;
                    background-size:100% 100%;
                    margin-top:4px;
                    @include bg-image('../../assets/image/icon_kftips');
                }
                span{
                    margin-left:0.2rem;
                }
            }
            .area{
                width:2rem;
                height:0.46rem;
                line-height:0.46rem;
                text-align:center;
                border:1px solid #ddd;
                border-radius:0.23rem
            }
            &.active{
                color:$color-focus !important;
                .area{
                    border-color:$color-focus !important;
                }
                .time{
                    i{
                        @include bg-image('../../assets/image/icon_kfjttips');
                    }
                }
            }
        }
    }
    .type_4{
        .item-list{
            position:relative;
            display:flex;
            justify-content: space-between;
            margin-top:0.2rem;
            border-bottom:1px solid #f2f2f2;
            &:last-child{
                border-bottom:none;
            }
            .desc{
                flex:1;
                overflow:hidden;
            }
            &:first-child{
                margin-top:0;
            }
            .title{
                font-size:$font-size-m;
            }
            .btn{
                position:absolute;
                top:0;
                right:0;
                width:1.1rem;
                height:0.5rem;
                line-height:0.5rem;
                background:#fed404;
                font-size:$font-size-m;
                text-align: center;
                color:#fff;
                border-radius:0.25rem;
            }
            p{
                span{
                    margin-left:0.2rem;
                    color:$color-focus;
                    span{
                        text-decoration: underline;
                    }
                }
                .icon{
                    font-size:0.4rem;
                    color:$color-focus;
                    vertical-align: top;
                }
            }
            .giftInfo{
               height:0.5rem;
               @include ellipsis();
            }
        }
    }
    .type_5{
        .item-list{
            display:flex;
            align-items: center;
            line-height:0.7rem;
            border-bottom: 1px solid #f2f2f2;
            &:last-child{
                border-bottom:none;
            }
            .name{
                height:0.42rem;
                line-height:0.42rem;
                background:#fed504;
                border-radius:0.21rem;
                color:#fff;
                width: 1.2rem;
                text-align: center;
                 @include ellipsis();
            }
            .title{
                margin:0 0.2rem;
                flex:1;
                display:flex;
                .text{
                    display:inline-block;
                    max-width:4.5rem;
                    @include ellipsis();
                }
            }
            .icon{
                color:$color-focus;
                font-size:0.4rem;
            }
        }
    }
    .autoHeight{
        height:auto !important;
    }
}
</style>